<template>
	<view class="personaldata">
		<view class="box"></view>
		<view class="list-personal">
			<view class="chat-item">
				<view class="chat-content">
					<text class="title">头像</text>
				</view>
				<button class="btn-avatar" plain="true" open-type="chooseAvatar" @chooseavatar="setAvatar">
					<image class="chat-avatar" :src="useUserInfo.userInfo.avatarUrl" mode="widthFix">
					</image>
				</button>
			</view>
			<view class="separator"></view>
			<view class="chat-item">
				<view class="chat-content">
					<text class="title">用户id</text>
				</view>
				<text class="information">{{useUserInfo.userInfo.id}}</text>
			</view>
			<view class="separator"></view>
			<view class="chat-item">
				<view class="chat-content">
					<text class="title">昵称</text>
				</view>
				<text class="information" @click="showPop">{{nickName}}</text>
			</view>
			<view class="separator"></view>
		</view>
		<up-popup :show="show" @close="close" @open="open" :closeable="true" mode="center">
			<view class="register-box">
				<view class="title-x">
					<view class="title">修改昵称</view>
				</view>
				<view class="from1">
					<view>昵称</view>
					<input type="nickname" @change="getName" v-model="nickName">
				</view>
				<view class="register1-btn" @click="setName">保存</view>
			</view>
		</up-popup>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		post,
		baseUrl
	} from '/hooks/req.js';
	import {
		useUserStore,
	} from '@/store/index';
	import {
		onLoad
	} from "@dcloudio/uni-app"
	let useUserInfo = useUserStore()
	const show = ref(false);
	const showPop = () => {
		show.value = true
	}
	const open = () => {
		show.value = true
	}
	const close = () => {
		show.value = false
		nickName.value=useUserInfo.userInfo.nickName
	}
	//用户修改昵称
	const nickName = ref('')
	const getName=(e)=>{
		nickName.value=e.detail.value
	}
	const setName = () => {
		if (nickName.value == '') {
			uni.showToast({
				title: "请输入值",
				icon: 'none'
			})
		} else {
			useUserInfo.userInfo.nickName=nickName.value
			post("/uniApp/updateNickName", useUserInfo.userInfo, uni.getStorageSync("token")).then(res => {
				uni.setStorage({
					key: "user",
					data: useUserInfo.userInfo
				})
				nickName.value=useUserInfo.userInfo.nickName
				show.value=false
			})
		}

	}
	//修改用户头像
	const setAvatar = (e) => {
		let base64 = 'data:image/png;base64,' + wx.getFileSystemManager().readFileSync(e.detail.avatarUrl, 'base64')
		useUserInfo.userInfo.avatarUrl = base64
		post("/uniApp/updateAvatarUrl", useUserInfo.userInfo, uni.getStorageSync("token")).then(res => {
			uni.setStorage({
				key: "user",
				data: useUserInfo.userInfo
			})
		})
	}
	const back = () => {
		uni.navigateTo({
			url: "/pages/personaldata/personaldata"
		})
	}
	onLoad(()=>{
		nickName.value=useUserInfo.userInfo.nickName
	})
</script>

<style lang="scss" scoped>
	.personaldata {
		flex-direction: column;
		.box-bg {
			background-color: #F5F5F5;
		}
		.box {
			height: 300rpx;
			background: #ff6700;
		}

		.list-personal {
			height: 420rpx;
			flex-direction: column;
			margin: 20rpx;
			flex: 1;
			border-radius: 20rpx 20rpx 0 0;
			margin-top: -100rpx;
			background: white;
			display: flex;
			flex-direction: column;
			box-shadow: 0 10rpx 20rpx rgba(0, 0, 0, 0.1);
			.chat-item {
				display: flex;
				align-items: center;
				padding: 20rpx 20rpx;
			}

			.separator {
				height: 1rpx;
				width: 90%;
				background-color: #f5f6f7;
				margin-top: 10rpx;
				margin-left: 30rpx;
			}

			.chat-content {
				flex: 1;
				margin-right: 20rpx;
			}

			.title {
				font-size: 28rpx;
				color: #333;
			}

			.btn-avatar {
				border: none;
				.chat-avatar {
					width: 120rpx;
					height: 120rpx;
					border-radius: 50%;
					margin-left: auto;
				}
			}

			.information {
				color: #969799;
				font-size: 26rpx;
			}


		}

		.register-box {
			
			height: 200rpx;
			width: 650rpx;
			background: white;
			padding: 30rpx;
			margin-bottom: 50px;
			.title {
				color: #646566;
				font-weight: 600;
				font-size: 18px;
			}

			.from1 {
				display: flex;
				justify-content: space-between;
				padding: 10px;
				margin-top: 70rpx;
				border-bottom: 1px #969799 solid;
				input{
					text-align: right;
				}
			}

			.register1-btn {
				margin-top: 20px !important;
				height: 30px;
				font-size: 15px;
				text-align: center;
				line-height: 30px;
				color: white;
				border-radius: 50rpx;
				margin: 0 10rpx;
				background: #ff6700;
			}
		}


	}
</style>